<template>
  <div class="content">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in $store.state.classifyList.currentCategory.bannerList" :key="item.id">
        <img :src="item.picUrl" alt="">
      </van-swipe-item>
    </van-swipe>
    <div class="commodity">
      <div v-for="item in $store.state.classifyList.categoryL2List" :key="item.id">
        <img :src="item.wapBannerUrl" alt="">
        <span>{{item.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created () {
    this.$store.dispatch('getClassifyList', '')
  },
  computed: {
    getClassifyList () {
      return this.$store.state.classifyList
    }
  }
}
</script>

<style lang='less' scoped>
.content{
  position: fixed;
  left: 1.6rem;
  top: .88rem;
  width: 5.9rem;
  height: calc(100vh - 50px - .88rem);
  overflow-y: auto;
  padding: .3rem;
  .my-swipe{
    width: 5.25rem;
    height: 1.92rem;
    background-color: #eee;
    img{
      width: 5.28rem;
      height: 1.92rem;
    }
  }
  .commodity{
    display: flex;
    flex-wrap: wrap;
    div{
      width: 1.44rem;
      margin: .3rem .32rem 0 0;
      text-align: center;
      img{
        width: 1.44rem;
        height: 1.44rem;
      }
      span{
        width: 1.44rem;
        overflow: hidden;
        font-size: .24rem;
      }
    }
  }
}
</style>
